<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form autosave>
			<input type="search" autofocus autocomplete="off" placeholder="请输入关键词" />
			<!--
				当type属性的值为file时，
				该布尔属性的存在表明使用媒体捕获机制直接从设备环境捕获媒体是首选。
			-->
			<input type="file" accept="image/*" capture />
			<input type="submit" value="提交"/>
		</form>
		<canvas></canvas>
		<script type="text/javascript">
			
			var inp = document.querySelector("input[type=file]");
			inp.onchange = function(){
				console.log(inp);
				console.log(inp.value);
				var file = inp.files[0];
//				upload(file);
				drawOnCanvas(file);
				displayAsImage(file);
			};
			//图片上传
			function upload(file){
				var form = new FormData();
				xhr = new XMLHttpRequest();
				form.append('image',file);
				xhr.open("POST","server.php");
				xhr.send(form);
			}
			//图像也可以在客户端显示而无需上传，例如用于客户端图像编辑，使用 FileReader和canvas元素：
			function drawOnCanvas(file){
				//FileReader对象允许web应用程序异步读取储存在用户计算机上的文件（或原始数据缓冲区）的内容，
				//使用 File 或 Blob 对象指定要读取的文件或数据。
				var reader = new FileReader();
				//FileReader.onload处理load事件。该事件在读取操作完成时触发。
				reader.onload = function(e){
					console.log(e);
					//返回base64格式的图片
					var dataURL = e.target.result,
						c = document.querySelector("canvas"),
						ctx = c.getContext("2d"),
						img = new Image();
					img.onload = function(){
						c.width = img.width;
						c.height = img.height;
						/**
						 * drawImage(img,dx,dy)
						 * 
						 * img:要绘制到上下文中的元素
						 * dx:目标画布中的X坐标，用于放置源的左上角image
						 * dy:目标画布中的Y坐标，用于放置源的左上角image。
						 * 
						 * */
						ctx.drawImage(img,0,0);
					}
					img.src = dataURL;
				}
				//FileReader.readAsDataURL()
				//开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
				reader.readAsDataURL(file);
			}
			//使用 createObjectURL()方法和img元素显示图像
			function displayAsImage(file){
				var imgURL = URL.createObjectURL(file),
					img = document.createElement("img");
				img.onload = function(){
					URL.revokeObjectURL(imgURL);
				}
				img.src = imgURL;
				document.body.appendChild(img);
			}
			
		</script>
	</body>
</html>
